<template>
  <div class="background" style="height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #20ab6c">
    <div style="display: flex;background-color: white;width: 35%;border-radius: 10px;overflow: hidden">
      <div style="flex: 1;width: 70%">
        <img alt="" src="@/assets/login2.jpeg" style="height:530px;">
      </div>
      <div style="flex: 1;display: flex;align-items:center;justify-content: center">
        <el-form ref="registerRef" :model="user" :rules="rules">
          <div style="font-size: 25px; font-weight: bold;text-align:center;padding: 0 0 40px">注册好租房账号</div>
          <el-form-item prop="username">
            <el-input v-model="user.username" placeholder="请输入账号" prefix-icon="el-icon-user" size="medium"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="user.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password size="medium"></el-input>
          </el-form-item>
          <el-form-item prop="role">
            <el-select v-model="user.role" placeholder="请选择身份" >
              <el-option label="租客" value="租客"></el-option>
              <el-option label="房东" value="房东"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="background-color: #39AC6A;width: 100%" type="success" @click="register">注册</el-button>
          </el-form-item>
          <div style="font-size: 13px">
            <div style="text-align: right">已有账号？去 <span style="color: #39AC6A;cursor: pointer" @click="login">登录</span></div>
          </div>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data(){
    return{
      user:{
        username: "",
        password: "",
        role:"",
      },
      rules:{
        username:[
          {required : true,message:'请输入姓名',trigger:'blur'}
        ],
        password:[
          {required : true,message:'请输入密码',trigger:'blur'},
          {min:5,max:8,message:'长度在5到8个字符',trigger:'blur'}
        ],
        role:[
          {required : true,message:'请选择角色',trigger:'change'},
        ],
      }
    }
  },
  methods:{
    login(){
      this.$router.push('/login');
    },
    register() {
      this.$refs.registerRef.validate(valid => {
        if (valid) {
          axios({
            url: "http://localhost:8090/user/register",
            method: 'post',
            data: this.user
          }).then(res => {
            console.log(res.code)
            if (res.code === '200') {
              this.$message.success('注册成功!')
              this.$router.push('/login');
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.background {
  background-image: url("@/assets/backgroundplus.jpg");
  background-repeat: no-repeat;
}

</style>